<template>
  <ex-dialog
    width="1100px"
    class="ex-diolog"
    title="费率模式"
    :visible="visible"
    @closeDialog="handleClose"
  >	
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="start"
        label="分段费率区间开始（元）"
        width="180">
      </el-table-column>
      <el-table-column
        prop="end"
        label="分段费率区间结束（元）"
        width="180">
      </el-table-column>
      <el-table-column
        prop="calcTypeDict"
        label="计费类型">
      </el-table-column>
      <el-table-column
        prop="onlineCardTypeDict"
        label="卡类型（银联卡使用）"
        width="180">
      </el-table-column>
      <el-table-column
        prop="fee"
        label="费率（%）"
        width="100">
      </el-table-column>
      <el-table-column
        prop="minFee"
        label="最小费率金额(元)"
        width="130">
      </el-table-column>
      <el-table-column
        prop="maxFee"
        label="最大费率金额(元)">
      </el-table-column>
    </el-table>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  getfeeRanges,
} from '@/api/moneyManagement'

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String
  },
  data() {
    return {
      tableData: [],
			
    }
  },
  computed: {
   
  },
  created() {
    this.getfeeRanges()
	},
  methods: {
    //获取角色
		getfeeRanges(){
      var id = this.id
			getfeeRanges(id).then(res => {
        const {result} = res
        this.tableData = result
      }).finally(() => {
        this.loading = false
      })
		},
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
   
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}
.table{
  border: 1px solid #606266;
  .top{
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #606266;
    .list:nth-last-child(1){
      border: none;
    }
  }
  .main{
    display: flex;
    justify-content: flex-start;
    .list:nth-last-child(1){
      border: none;
    }
  }
  .list{
    flex: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 14px 0;
    border-right: 1px solid #606266;
  }
}
</style>
